<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../layui-v2.9.0/layui/css/layui.css" media="all">
  <script src="../layui-v2.9.0/layui/layui.js"></script>
</head>
<body>

<div style="width: 1400px">
  <!--    顶部导航栏-->
  <div class="layui-col-xs10 layui-col-xs-offset1">

    <ul class="layui-nav layui-bg-gray">
      <li class="layui-nav-item left-nav layui-col-xs2">
        <!-- 品牌logo位置 -->
        <div class="nav-profile">
          <!-- 图像使用div包裹，设置相对定位 -->
          <div class="nav-profile-img" style="margin-left: 20px;">
            <img class="logo_img" src="../img/热趣部落.png" style="transform: scale(1.5);" alt="加载中"/>
          </div>
          <!-- 用户名链接 -->
          <a href="#" style="color: black;">热趣部落</a>
        </div>
      </li>
      <li class="layui-nav-item layui-this layui-col-xs1"><a href="/indexPage">首页</a></li>
      <li class="layui-nav-item layui-col-xs1"><a href="">热点</a></li>
      <li class="layui-nav-item layui-col-xs1">
        <a href="javascript:;">模块</a>
        <dl class="layui-nav-child">
          <dd><a href="">趣点模块</a></dd>
          <dd><a href="">动态模块</a></dd>
          <dd><a href="">个人信息模块</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item "><a href="">关于</a></li>
      <!--            个人信息接口-->
      <li class="layui-nav-item layui-col-xs2" style="float: right">
        <div class="nav-profile">
          <div class="nav-profile-img" style="margin-left: 20px;">
            <img class="layui-nav-img" src="../img/img1.png" style="transform: scale(1.5);" alt="加载中"/>
          </div>
          <!-- 用户名链接 -->
          <a href="javascript:;" style="color: black;">张三</a>
          <dl class="layui-nav-child" style="text-align: center">
            <dd><a href="">个人信息</a></dd>
            <dd><a href="">我的好友</a></dd>
            <dd >
              <div >
                <a href=""> <i class="layui-icon layui-icon-logout"></i> 退出登录</a>
              </div>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
  </div>

  <!--    添加趣点界面表单-->
  <div class="layui-col-xs10 layui-col-xs-offset1 layui-bg-gray" style="margin-top: 30px">
    <h2 style="text-align: center; margin-top: 20px;margin-bottom: 10px">创建话题</h2>
    <hr style="margin-bottom: 20px;border: 1px solid">
    <form class="layui-form layui-form-pane layui-col-xs8 layui-col-xs-offset2" >
      <!--            趣点名称-->
      <div class="layui-form-item">
        <label class="layui-form-label">话题名称</label>
        <div class="layui-input-block">
          <input type="text" name="title" autocomplete="off" placeholder="请输入" lay-verify="required" class="layui-input">
        </div>
      </div>


      <!--            趣点兴趣标签选择-->

      <div class="layui-form-item" id="ID-transfer-demo-showSearch" ></div>


      <div class="layui-form-item">
        <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
        <a href="javascript:void(0)" style="position: relative; top: 6px; left: -15px;" lay-on="test-iframe-curl">
          <ins>创建话题协议</ins>
        </a>
      </div>


      <div class="layui-form-item">
        <button class="layui-btn" lay-submit lay-filter="form-data" >确认</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </form>
  </div>

</div>



<script>
  layui.use( function(){
    var form = layui.form;
    var layer = layui.layer;
    var transfer = layui.transfer;
    var $ = layui.$;
    var upload = layui.upload;
    var element = layui.element;
    var util = layui.util;
    // 提交事件
    form.on('submit(form-data)', function(data){
      var field = data.field; // 获取表单字段值
      // 显示填写结果，仅作演示用
      // 此处可执行 Ajax 等操作
      // …
      var t = transfer.getData('ID-transfer-demo');
      var dataToSend = {
        'title': field.title,
        'transfers': t
      };
      t = JSON.stringify(dataToSend);
      $.ajax({
        url: '/barinterest/test',
        type:"post",
        data: t,
        headers : {'Content-Type' : 'application/json;charset=utf-8'}, //接口json格式
        success: function (res) {
          layer.msg(res);
        },
        error: function (data) {
          layer.msg('上传失败');
        }
      });
      return false; // 阻止默认 form 跳转
    });

    // 兴趣标签数据加载
    var data = [];
    $.ajax({
      url: '/interest/getAllInterestLabels',
      type:"post",
      dataType: 'json',
      success: function (res) {
        data = res;
        // 渲染
        transfer.render({
          elem: '#ID-transfer-demo-showSearch',
          id: 'ID-transfer-demo',
          width: 300,
          height: 300,
          data: data,
          title: ['未选——兴趣标签', '已选——兴趣标签'],
          showSearch: true
        });
      },
      error: function (data) {
        layer.msg('兴趣标签加载失败');
      }
    })


    //     用户协议
    util.on('lay-on', {
      'test-iframe-curl': function () {
        layer.open({
          type: 2,
          title: '创建话题协议',
          shadeClose: true,
          maxmin: true, //开启最大化最小化按钮
          area: ['800px', '500px'],
          content: '/private/createTopicAgreement'
        });
      }
    });

  });
</script>


</body>
</html>

<style>
  /* styles.css */
  .nav-profile {
    display: flex;
    align-items: center;
  }

  .nav-profile-img {
    position: relative;
    margin-right: 10px;
  }
  a{
    margin-left: 10px;
  }
  a:hover{
    text-decoration: underline;
  }

  hr{
    padding: 0;
    margin: 0;
  }
  .logo_img{
    width: 40px;
    height: 30px;
  }
</style>
